<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simba</title>
</head>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1467675_0h1zn98t19vt.css">
<style>
     *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .container{
        width: 670px;
        height: 570px;
        margin: 100px auto;
        border: 1px solid #ccc;
    }
    .header{
        padding: 0 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 65px;
        background-color: rgb(90,111,254);
    }
    .header p {
        color: #fff;
        font-size: 25px;
        font-weight: bold;
    }
    .header .home{
        width: 100px;
        border: none;
        outline: none;
        cursor: pointer;
        background-color: rgb(228,227,255);
        color: rgb(90,111,254);
        font-size: 16px;
        height: 40px;
    }
    .mains{
        display: flex;
        height: 450px;
    }
    .mains_left{
        width: 180px;
        height: inherit;
        background-color: rgb(102,122,254);
    }
    .mains_right{
        overflow-y: scroll;
        padding:0 20px;
        flex: 1;
    }
    .footer{
        padding: 0 40px;
       
        height: 55px;
        background-color: rgb(90,111,254);
    }
   .chatfrom{
    display: flex;
    height: inherit;
        justify-content: space-between;
        align-items: center;
   }
   #msg{
    height: 30px;
    flex: 1;
    outline: none;
    padding: 5px 20px;
   }
   .btn{
        width: 100px;
        border: none;
        outline: none;
        cursor: pointer;
        background-color: rgb(228,227,255);
        color: rgb(90,111,254);
        font-size: 16px;
        height: 40px;

   }
   .btn:active{
    background-color: rgb(228,227,255);
   }
   .users,.letter_user{
       cursor: pointer;
       width: 100%;
       height: 50px;
       color: #fff;
       text-indent: 20px;
       font-size: 22px;
       font-weight: bold;
       line-height: 50px;

   }
   .active,.action{
       background-color: rgb(94,110,200) !important;
   }
   .information{
    word-wrap:break-word; 
        word-break:break-all;
        margin: 20px 0;
       padding: 4px 15px 4px 8px;
       border-radius: 8px;
    background-color: rgb(227,229,294);
   }
   .top{
       align-items: flex-end;
       display: flex;
       padding: 2px 0;
       color: rgb(63, 104, 241);
   }
   .top p{
       text-indent: 10px;
       font-size: 12px;
       color:red;
   }
   .chat_mass{
    padding: 2px 0;
   }
   .titlelist,.litteruser{
       cursor: pointer;
       line-height: 50px;
       height: 50px;
        color: #fff;
        font-size: 25px;
        text-indent: 10px;
   }
</style>
<body>
<div class="container">
    <div class="header">
        <p class="chat">聊天室</p>
        <button class="home">离开房间</button>
    </div>

    <div class="mains">
        <div class="mains_left">
            <div class="peplet">
             <div class="litteruser"> 
                 <p><i class="iconfont icon-emailFilled" style="font-size: 20px;"></i>  房间名称</p>
                </div>
              <p class="letter_user active">javascropt</p>
            </div>

            <div class="userlist">
            <div class="titlelist"> <i class="iconfont icon-huabanfuben" style="font-size: 24px;"></i> 用户</div>
            <p class="users">simba</p>
            <p class="users">mary</p>
            <p class="users">BOb</p>
            <p class="users">tomy</p>

            </div>
        </div>
        
        <div class="mains_right"></div>
    </div>

   <div class="footer">
        <form action="" class="chatfrom">

            <input id="msg" type="text" placeholder="Enter Message" >
            <input type="submit" value="发送" class="btn">
        </form>
   </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
<script src="./js/main.js"></script>
</body>
</html>